<template>
	<view class="activityBox">
		<view class="left-image" :style="{ gridRow: 'span 2', backgroundImage: 'url(' + posterData[0].img + ')' }"
			@click="posterTap">
			<view class="left-image-content">
				<view class="content-title">
					{{ posterData.title }}
				</view>
				<view class="">
					{{ posterData.tips }}
				</view>
				<!-- <button type="default">立即查看</button> -->
			</view>
		</view>
		<view class="activityBox-item" v-for="(item, ind) in activityData" :key="ind"
		:style="{  backgroundImage: 'url(' +item.img + ')' }" @click="activityTap(item)">
			<!-- <view class="activityBox-itemTitle flex-aic">
				{{ item.title }}
				<view class="tips">
					{{ item.tips }}
				</view>
			</view> -->
			<!-- <view class="activityBox-itemBody flex-aic-jcsb ">
				<view class="activityBox-itemBody-item flex-fdc-aic-jcc" v-for="(obj, index) in item.active"
					:key="index" @click="activityTap(obj)">
					<image :src="obj.img" mode=""></image>
					<view class="" v-if="item.type == 'brokerage'">
						佣金<text>{{ obj.brokerage }}%</text>
					</view>
					<button v-if="item.type == 'sample'" type="default">20%佣金</button>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
import props from '@/components/uv-tabs/components/uv-tabs/props';
export default {
	props: {
		posterData: {
			type: Array,
			default: []
		},
		activityData: {
			type: Array,
			default: () => [
				{
					title: '宠粉福利',
					tips: '超低价随心选',
					type: 'brokerage', //佣金活动 brokerage ，样品活动 sample 
					active: [{
						name: '臭豆腐',
						brokerage: 40,
						img: "http://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/20230727103931711652852.png",
					},
					{
						name: '麻辣香锅',
						brokerage: 20,
						img: "http://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/2023072710384311c553153.png",
					}
					]
				},
				{
					title: '新人严选',
					tips: '自带流量 爆款狙击',
					type: 'sample', //佣金活动 brokerage ，样品活动 sample 
					active: [{
						name: '臭豆腐',
						brokerage: 40,
						img: "http://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/20230727103931711652852.png",
					},
					{
						name: '麻辣香锅',
						brokerage: 20,
						img: "http://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/2023072710384311c553153.png",
					}
					]
				},

			]
		},
	},
	data() {
		return {
			// isIos:false,
		}
	},
	created() {
		// 判断是否是 ios	
		console.log(props.activityData);

	},
	methods: {
		activityTap(index) {
			this.$emit('activityTap', index)
		},
		posterTap() {
			this.$emit('posterTap', this.posterData[0])
		}
	}
}
</script>

<style lang="scss" scoped>
.activityBox {
	margin: 10rpx 25rpx 20rpx;
	width: 700rpx;
	display: grid;
	grid-template-columns: 340rpx 340rpx;
	grid-template-rows: 260rpx 260rpx;
	grid-gap: 20rpx;

	.activityBox-item {
		padding: 10rpx 20rpx;
		border-radius: 20rpx;
		// background: linear-gradient(180deg, #FEF7F5 0%, #FDFDFD 21%, #fff 100%);
		background-size: 100%  100%;
		.activityBox-itemTitle {
			font-size: 24rpx;
			font-weight: 700;

			.tips {
				margin-left: 4rpx;
				font-size: 20rpx;
				padding: 5rpx;
				color: #DF7237;
				background: #FEF0E7;
			}
		}

		.activityBox-itemBody {
			width: 100%;
			color: #DE5758;
			font-size: 22rpx;

			.activityBox-itemBody-item {
				image {
					margin: 8rpx 0;
					height: 130rpx;
					width: 130rpx;
					border-radius: 10rpx;
				}

				button {
					height: 30rpx;
					width: 120rpx;
					margin: 0 0 0 !important;
					padding: 0 !important;
					color: #fff;
					font-size: 22rpx;
					border-radius: 19rpx;
					line-height: 35rpx;
					background: linear-gradient(90deg, #FD342C 0%, #FD744E 99%);
				}
			}
		}
	}

	.left-image {
		border-radius: 20rpx;
		position: relative;
		// background-image: url(http://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/202307271018121fdad1299.png);
		background-size: cover;

		.left-image-content {
			position: absolute;
			bottom: 30rpx;
			left: 20rpx;
			font-size: 24rpx;
			color: #fff;

			.content-title {
				padding: 15rpx 0;
				font-size: 34rpx;
			}

			button {
				height: 40rpx;
				width: 150rpx;
				margin: 10rpx 0 0 !important;
				padding: 0 !important;
				color: #3d3d3d;
				font-size: 26rpx;
				border-radius: 20rpx;
				line-height: 40rpx;
				background: linear-gradient(180deg, #FCFCEE 0%, #FBDA8B 100%);
			}
		}
	}
}

.flex-aic-jcsb {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.flex-fdc-aic-jcc {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
</style>